<template>
  <div>
<!--    <div v-show="dialogVisible" class="qrcode_box">-->
<!--      <div class="qrcode_box_s" style="text-align:center;">-->
<!--        &lt;!&ndash; <h3>扫码二维码</h3> &ndash;&gt;-->
<!--        <p class="text"  @click.stop="hide"><i class="iconfont icon-guanbi"></i></p>-->
<!--         &lt;!&ndash; <h3>[顺企中心]{{desc.tio}}-{{desc.ano}}-{{text}}</h3> &ndash;&gt;-->
<!--         <h3>{{`${this.desc.tio}`}}</h3>-->
<!--         <h3>{{`${this.desc.ano}`}}</h3>-->
<!--         <h3>{{`${this.text}`}}</h3>-->
<!--        <div id="qrcode" ref="qrcode"></div>-->
<!--      </div>-->
<!--    </div>-->



    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      class="dialog_bgc"
      :before-close="hide">
      <div slot="title" >
        <div class="dialog_tio">{{desc.tio}}</div>
        <div class="dialog_pns">{{desc.pns}}</div>
      </div>
      <el-row style="background-color: #fff;padding: 14px">
        <el-col >
          <el-row :gutter="20">
            <el-col :span="16">
              {{text}}
            </el-col>
            <el-col :span="7" :offset="1">
              <el-button class="dialog_b" @click="fz_url">复制链接</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col> </el-col>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col :span="7">
          <div id="qrcode" ref="qrcode"> </div>
        </el-col>
        <el-col :span="11" style="padding-top: 14px">
          <el-row>
            <el-col>将二维码分享给好友， 对方微信扫一扫即可查看专利详情</el-col>
            <el-col style="margin-top: 10px">
              <el-button id="a" class="dialog_b" @click="handleDownloadCode">下载二维码</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  props: ["text", "desc", "dialogVisible"],
  mounted() {
    this.qrCode(this.text);
  },
  methods: {
    fz_url(){
      var cInput = document.createElement("input");
      cInput.value = this.text;
      document.body.appendChild(cInput);
      cInput.select(); // 选取文本框内容

      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
      // Input要在正常的编辑状态下原生复制方法才会生效

      document.execCommand("copy");

      this.$message({
        type: "success",
        message: "复制成功"
      });
      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput);
    },
    qrCode(url) {
      // console.log(url);
      // let qrcode = new QRCode("qrcode", {
      //   text: url,
      //   width: 150, //图像宽度
      //   height: 150, //图像高度
      //   colorDark: "#000000", //前景色
      //   colorLight: "#ffffff", //背景色
      //   typeNumber: 4,
      //   correctLevel: QRCode.CorrectLevel.H, //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
      // });
      // qrcode.clear(); //清除二维码
      // qrcode.makeCode(url); //生成另一个新的二维码
      setTimeout(() => {
        // let qrcodeObj = window.document.getElementById('qrcode');
        // console.log(this.$refs,'refs')
        let qrcodeObj = this.$refs.qrcode
        // console.log(qrcodeObj,'asdasdsda')
        qrcodeObj.innerHTML = ''
        var qrcode = new QRCode(qrcodeObj, {
          text:  url ,
          width: 100,
          height: 100
        });
      },0)

    },
    // 按钮下载二维码到本地
    handleDownloadCode(){
      var canvas = window.document.getElementById('qrcode').getElementsByTagName('canvas')[0]
      // console.log(canvas.toDataURL())
      this.downLoadImage(canvas);
    },
    downLoadImage(canvas) {
      let a = document.createElement("a");
      a.href = canvas.toDataURL();
      a.download = name;
      a.click();
    },
    hide() {
        this.$emit("val",false)
    },

  },
};
</script>


<style lang="less" scoped>
  .dialog_tio {
    color: #3377FF;
    font-size: 16px;
  }
  .dialog_pns {
    color: #000000;
    font-size: 12px;
    margin-top: 5px;
  }
  .dialog_b {
    background-color: #4983FF;
    color: #fff;
  }

  ::v-deep .dialog_bgc {
    .el-dialog {
      .el-dialog__body {
        background-color: #F5F6FA!important;
      }
    }
  }


.qrcode_box {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .qrcode_box_s {
    width: 20%;
    background: #fff;
    border-radius: 15px;
    padding:30px;
    // height:300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 111;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    h3{
        margin-bottom:5px;
        font-size: 14px;
    line-height: 19px;
    word-break: break-all;
    }
  }
}

.text{
  text-align: right !important;
      width: 100%;
      margin-bottom:20px;
}

@media (max-width:750px) {
  .qrcode_box .qrcode_box_s{
    width:70%;
  }
}
</style>
